<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="index">
<div th:fragment="explore">
    <div class="main-explore">
    <main class="explore-title">
        <div class="section-switcher section-explore">
            <div class="section-header">
                <ul class="chanels">
                    <li><a href="">
                        <svg title="Title" viewBox="0 0 23 23" height="23" width="23" class="icon"
                             style="vertical-align: top;">
                            <desc>Icon</desc>
                            <g id="icon" fill="none" fill-rule="evenodd">
                                <g id="924_radio-copy-2" transform="translate(4 -1)">
                                    <g id="Layer_1">
                                        <g id="Group">
                                            <path
                                                    d="M15 18.815c0 .962-.207 1.185-1.106 1.185H1.106C.21 20 0 19.777 0 18.815v-8.628C0 9.223.21 9 1.106 9h12.788C14.793 9 15 9.223 15 10.187v8.628z"
                                                    id="Shape" stroke="#979797"></path>
                                            <ellipse id="Oval" stroke="#979797" cx="8.712" cy="5.644" rx=".36"
                                                     ry=".36"></ellipse>
                                            <path
                                                    d="M2.848 9l5.754-3.31M8.292 3.08a2.251 2.251 0 0 1 2.928 3.04M9.604 11.688a2.839 2.839 0 0 0-1.588 5.193M11.49 12.404a2.839 2.839 0 0 1-1.884 4.963"
                                                    id="Shape" stroke="#979797"></path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                        兆赫</a></li>
                    <li><a href="/collection">
                        <svg title="Title" viewBox="0 0 23 23" height="23" width="23" class="icon"
                             style="vertical-align: top;">
                            <desc>Icon</desc>
                            <g id="icon" fill="none" fill-rule="evenodd">
                                <g id="1205_cd-copy" transform="rotate(-90 11.75 8.75)" stroke="#979797">
                                    <g id="Layer_1">
                                        <g id="Group">
                                            <path d="M7.334 15.793v-4.778M10.61 9.688l3.938 3.05" id="Shape"></path>
                                            <path
                                                    d="M8.25 15.984a7.724 7.724 0 0 0 6.291-3.234 7.734 7.734 0 1 0-6.291 3.234z"
                                                    id="Oval"></path>
                                            <ellipse id="Oval" cx="8.25" cy="8.25" rx="1.017" ry="1.017"></ellipse>
                                            <circle id="Oval" cx="8.25" cy="8.25" r="2.765"></circle>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                        歌单</a></li>
                    <li><a href="/my">
                        <svg title="Title" viewBox="0 0 23 23" height="23" width="23" class="icon"
                             style="vertical-align: top;">
                            <desc>Icon</desc>
                            <g id="icon" fill="none" fill-rule="evenodd">
                                <path
                                        d="M15 5c-1.532 0-2.71.863-3.5 1.75C10.726 5.863 9.55 5 8 5 5.878 5 4 6.962 4 9.5c0 1.505.422 3.036 1.25 4.5 2.19 3.834 6.262 5.481 6.25 5.5-.012.018 3.965-1.623 6.25-5.5.838-1.438 1.267-2.884 1.25-4.5.017-2.538-1.86-4.5-4-4.5z"
                                        id="Imported-Layers-Copy-5" stroke="#979797"></path>
                            </g>
                        </svg>
                        我的</a></li>
                    <li><a href="/search">
                        <svg title="Title" viewBox="0 0 23 23" height="23" width="23" class="icon"
                             style="vertical-align: top;">
                            <desc>Icon</desc>
                            <g id="icon" fill="none" fill-rule="evenodd">
                                <defs>
                                    <path id="path-1" d="M2.134 5.113H0V.173h4.269v4.94H2.134z"></path>
                                </defs>
                                <g id="Page-1" transform="matrix(-1 0 0 1 19.469 4)">
                                    <path
                                            d="M8.004 1.023c-.17 0 .66.007-.51.022a5.685 5.685 0 0 0-3.897 2.048 5.797 5.797 0 0 0-1.321 4.23 5.775 5.775 0 0 0 2.028 3.935 5.669 5.669 0 0 0 4.19 1.334 5.688 5.688 0 0 0 3.897-2.048 5.798 5.798 0 0 0 1.321-4.231 5.778 5.778 0 0 0-2.028-3.934 5.666 5.666 0 0 0-3.68-1.356m-.021 12.614a6.663 6.663 0 0 1-4.33-1.596 6.793 6.793 0 0 1-2.386-4.629 6.817 6.817 0 0 1 1.554-4.976A6.688 6.688 0 0 1 7.405.026a6.663 6.663 0 0 1 4.93 1.57 6.793 6.793 0 0 1 2.386 4.628 6.817 6.817 0 0 1-1.554 4.977 6.69 6.69 0 0 1-5.184 2.436"
                                            id="Fill-1" fill="#979797"></path>
                                    <g id="Group-5" transform="translate(0 11.226)">
                                        <mask id="mask-2" fill="white">
                                            <use xlink:href="#path-1"></use>
                                        </mask>
                                        <path
                                                d="M.506 5.113a.504.504 0 0 1-.325-.12.515.515 0 0 1-.063-.72L3.374.356a.503.503 0 0 1 .714-.062.514.514 0 0 1 .062.72L.895 4.93a.505.505 0 0 1-.389.182"
                                                id="Fill-3" fill="#979797" mask="url(#mask-2)"></path>
                                    </g>
                                </g>
                            </g>
                        </svg>
                        搜索</a></li>
                </ul>
            </div>

        </div>

    </main>
    <div class="explore">
        <div class="container">
            <div class="specialChannel">
                <li class="left">
                    <div class="left-cover"></div>
                    <div class="des">
                        <a href="/channel/0" class="p4d0FLXaqb4wWvsoBdhED">我的私人兆赫</a>
                        <p class="_3tPQTErflM4oWIJ_8afM7M">豆瓣FM会根据你的喜好来推荐歌曲，让你与喜欢的音乐不期而遇</p>
                    </div>
                    <div class="_1fHgOm6W2AlVxE00nUyGud open"><a href="" class="_17ofef7uZlbpq_CkaRzQA0">去开启</a></div>
                </li>
                <li class="right">
                    <div class="right-cover">
                    </div>
                    <div class="des">
                        <a href="/channel/-10" class="p4d0FLXaqb4wWvsoBdhED">豆瓣精选兆赫</a>
                        <p class="_3tPQTErflM4oWIJ_8afM7M">汇聚各种音乐风格的精选兆赫，从这里开始音乐漫游吧</p>
                    </div>
                </li>
            </div>
            <div class="channel-block undefined">
                <h3 class="htitle">从艺术家出发</h3>
                <ul>
                    <li th:each="artist:${artistDatas}" class="channel channel-rouned">
                        <div class="cover" th:style="'background-image:url('+${artist.getCover()}+');'" ></div>
                        <div class="desinfo">
                            <a class="link title" th:href="@{'/artist?subjectId='+${artist.getId()}}" th:text="${artist.name}" th:title="${artist.name}"></a>
                            <p th:text="${artist.getDescription().substring(3)}" class="subtitle">赵雷 及其相似艺术家们</p>
                        </div>
                    </li>
                </ul>
                <div class="more">
                    <button class="button-more">加载更多兆赫</button>
                </div>
            </div>
            <div class="channel-block text-channels" th:each="channel:${mhzViewModel}">
                <h3 th:text="${channel.getTitle()}"></h3>
                <ul>
                    <li class="channel channel-text" th:each="subject:${channel.getSubjects()}"><a href="#/channel/153" th:text="${subject.name}" class="title">
                        <!-- react-text: 604 -->
                        <!-- /react-text --></a><span class="mhz">MHz</span></li>

                </ul>
            </div>
        </div>
    </div>
</div>
</div>
</html>